<!DOCTYPE html>
<html lang="en">
    <#assign security=JspTaglibs["http://www.springframework.org/security/tags"] />
    <head>
        <meta charset="UTF-8">
        <title>考勤管理</title>
        <link rel="stylesheet" href="css/layui.css" media="all">
        <link rel="stylesheet" href="css/doc.css" media="all">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <style>
            select {
                width: 120px;
                height: 40px;
                font-size: 20px;
                font-weight: bold;
                /*border: 1px solid;*/
            }
        </style>
    </head>

    <body>
        <div class="kit-doc">
            <blockquote class="layui-elem-quote">考勤管理</blockquote>
            <table class="layui-table">
                <colgroup>
                    <col width="3">
                    <col width="3">
                </colgroup>
                <thead>
                <tr>
                    <th style="width: 25px">
                        <div class="layui-input-inline">
                            <input type="text" lay-verify="required" placeholder="请输入用户名称"
                                   autocomplete="off"
                                   class="layui-input queryName" value="${queryName}">
                        </div>
                    </th>
                    <th>
                        <div class="layui-btn-container">
                            <button type="button" class="layui-btn layui-btn-normal query">查询</button>
                        </div>
                    </th>
                </tr>
                </thead>
            </table>
            <table class="layui-table">
                <thead>
                <tr>
                    <th>用户id</th>
                    <th>用户姓名</th>
                    <th>上班打卡状态</th>
                    <th>下班打卡状态</th>
                    <th>考勤id</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <#list userWorkStatus.records as status>
                    <tr>
                        <td>${status.userId}</td>
                        <td>${status.name}</td>
                        <td>${status.onWork}</td>
                        <td>${status.offWork}</td>
                        <td>${status.statusId}</td>
                        <td>
                            <@security.authorize access="hasRole('ADMIN')">
                                <button type="button" class="btn btn-danger deleteUserStatus">删除</button>
                            </@security.authorize>
                        </td>
                    </tr>
                </#list>
                </tbody>
            </table>
        </div>
        <div id="demo" style="margin-left: 470px;"></div><#--分页-->
        <br/><br/><br/>
        <#--修改考勤时间-->·
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">修改考勤班时间</h4>
                    </div>
                    <form method="post" action="/modifyWorkTime">
                        <div class="modal-body">
                            <div class="input-group">
                                <label for="recipient-pass" class="control-label">上班时间:</label>
                                <select name="ot01">
                                    <#list 0..23 as t>
                                        <option><#if t?length lt 2>${"0"+t}<#else>${t}</#if></option>
                                    </#list>
                                </select>&nbsp;:
                                <select name="ot02">
                                    <#list 0..59 as t>
                                        <option><#if t?length lt 2>${"0"+t}<#else>${t}</#if></option>
                                    </#list>
                                </select>&nbsp;:
                                <select name="ot03">
                                    <#list 0..59 as t>
                                        <option><#if t?length lt 2>${"0"+t}<#else>${t}</#if></option>
                                    </#list>
                                </select>
                            </div>
                            <div style="width: 1px; height: 10px"></div>
                            <div class="input-group">
                                <label for="recipient-pass" class="control-label">下班时间:</label>
                                <select name="ft01">
                                    <#list 0..23 as t>
                                        <option><#if t?length lt 2>${"0"+t}<#else>${t}</#if></option>
                                    </#list>
                                </select>&nbsp;:
                                <select name="ft02">
                                    <#list 0..59 as t>
                                        <option><#if t?length lt 2>${"0"+t}<#else>${t}</#if></option>
                                    </#list>
                                </select>&nbsp;:
                                <select name="ft03">
                                    <#list 0..59 as t>
                                        <option><#if t?length lt 2>${"0"+t}<#else>${t}</#if></option>
                                    </#list>
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary">修改</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="WorkTimeManage">
            <blockquote class="layui-elem-quote">考勤时间设置</blockquote>
            <table class="layui-table">
                <colgroup>
                    <col width="10">
                    <col width="35">
                    <col width="10">
                </colgroup>
                <thead>
                <tr>
                    <td>上班时间</td>
                    <td>${workTime.onWork}</td>
                    <td>
                        <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal">修改
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>下班时间</td>
                    <td>${workTime.offWork}</td>
                    <td>
                        <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal">修改
                        </button>
                    </td>
                </tr>
                </thead>
            </table>
        </div>
        <script src="js/jquery-3.5.1.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/layui.all.js"></script>
        <script type="text/javascript">
            /**
             * 删除考勤信息
             */
            $('.deleteUserStatus').click(function () {
                let statusId = $(this).parents("tr").find("td").eq(4).text();
                if (window.confirm("确认删除这条考勤吗?")) {
                    //删除考勤
                    $.ajax({
                        url: URL() + "deleteUserWorkStatus?",
                        type: "DELETE",
                        data: "statusId=" + statusId + "&pageNo=" + ${userWorkStatus.current},
                        success: function () {
                            window.location.href = URL() + "listUserWorkStatus?pageNo=" + ${userWorkStatus.current};
                        }
                    });
                }
            });

            /**
             * 分页
             */
            layui.use(['laypage', 'layer'], function () {
                var laypage = layui.laypage
                    , layer = layui.layer;
                laypage.render({
                    elem: 'demo'
                    , theme: '#009688'
                    , curr: ${userWorkStatus.current}// 当前第几页
                    , count: ${userWorkStatus.total}// 总条数
                    , limit: ${userWorkStatus.size}// 每页显示的条数
                    , jump: function (obj, first) {//obj.curr,当前第几页
                        if (!first) {
                            var queryName = $(".queryName").val();
                            window.location.href = URL() + "listUserWorkStatus?pageNo=" + obj.curr + "&queryName=" + queryName;
                        }
                    }
                });
            });

            //获取项目路径
            function URL() {
                return window.location.protocol + "//" + window.location.host + "/";
            }


            $(".query").click(function () {
                var queryName = $(".queryName").val();
                window.location.href = URL() + "listUserWorkStatus?pageNo=1&queryName=" + queryName;
            })
        </script>
    </body>
</html>